import React, { Component } from "react";
import {
  StyleSheet,
  View,
  Text,
  FlatList,
  Image,
  TouchableOpacity
} from "react-native";

import { connect } from "react-redux";
import HeaderDefault from "../../components/header/HeaderDefault";
import { theme_app, theme_text } from "../../utils/appTheme";
import { getPtOxyRec } from "../../netServer/patrol";
import Toast from "react-native-simple-toast";
import { dateTransform } from "../../utils/utils_date";
class OxygenDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      oxygenTaskList: []
    };
  }
  static navigationOptions = ({ navigation }) => ({
    header: (
      <HeaderDefault
        rightRitle="添加"
        rihghtBtnOnPress={() => {
          navigation.state.params.clickRightMethod();
        }}
        backBtnOnPress={navigation.goBack}
        title="吸氧巡视"
      />
    )
  });

  componentDidMount() {
    this.props.navigation.setParams({ clickRightMethod: this._ritBtn });
    this._loadOxygenList();
  }

  _loadOxygenList = () => {
    //sad
    this.setState({
      oxygenTaskList: []
    });
    //sad

    let params = new FormData();
    let { patient_no } = this.props.navigation.state.params.pinfo;
    params.append("patientNo", patient_no);

    getPtOxyRec(params, resp => {
      let { code, data = [], msg } = resp;

      if (code == "0") {
        this.setState({
          oxygenTaskList: data
        });
      } else {
        Toast.showWithGravity(msg, 0.3, Toast.CENTER);
      }
    });
  };

  _ritBtn = () => {
    this.props.navigation.navigate("OxygenAdd", {
      title: "添加吸氧巡视",
      commitSuccessCB: this._callback,
      isEditer: false,
      pinfo: this.props.navigation.state.params.pinfo
    });
  };

  _callback = () => {
    this._loadOxygenList();
  };

  _renderItem = item => {
    let {
      name,
      bed_no,
      sex,
      age,
      allergy,
      gradeName,
      inhosp_no,
      days,
      charge_type
    } = item;
    return (
      <View
        style={{
          width: screenWidth,
          height: 100,
          borderBottomColor: "#efefef",
          borderBottomWidth: 1,

          backgroundColor: "white"
        }}
      >
        <View
          style={{
            width: screenWidth,
            height: 40,
            paddingLeft: 16,
            paddingRight: 16,
            alignItems: "center",
            flexDirection: "row",
            justifyContent: "space-between"
          }}
        >
          <Text style={{ fontSize: 16 }}>{name}</Text>
          <Text>{bed_no}</Text>
        </View>

        <View
          style={{
            width: screenWidth,
            height: 30,
            paddingLeft: 16,
            paddingRight: 16,
            alignItems: "center",
            flexDirection: "row",
            justifyContent: "space-between"
          }}
        >
          <Text>
            {sex == 1 ? "男" : "女"}/{age}
          </Text>
          <Text>{inhosp_no}</Text>
          <Text>{days}</Text>
          <Text>{charge_type}</Text>
        </View>

        <View
          style={{
            width: screenWidth,
            height: 30,
            paddingLeft: 16,
            paddingRight: 16,
            alignItems: "center",
            flexDirection: "row"
          }}
        >
          <Text style={{ width: 80, color: "green" }}>{gradeName}</Text>
          <Text style={{ color: "red" }}>{allergy}</Text>
        </View>
      </View>
    );
  };

  _keyExtractor = (item, index) => "taesd" + index;

  _separator = () => {
    return <View style={{ height: 1, backgroundColor: "#efefef" }} />;
  };

  _renderFlatItem = ({ item }) => {
    let { use_way, flow_grade, start_time, end_time } = item;
    let dt_begin = start_time ? new Date(start_time.replace(/-/g, "/")) : null;
    let dt_end = end_time ? new Date(end_time.replace(/-/g, "/")) : null;

    return (
      <TouchableOpacity
        style={{
          width: screenWidth,
          height: 60,
          flexDirection: "row",
          borderBottomColor: "#efefef",
          borderBottomWidth: 1,
          backgroundColor: "white"
        }}
        onPress={() => {
          this.props.navigation.navigate("OxygenAdd", {
            title: "编辑吸氧巡视",
            commitSuccessCB: this._callback,
            pinfo: this.props.navigation.state.params.pinfo,
            isEditer: true,
            taskInfo: item
          });
        }}
      >
        <View style={styles.flattableCell}>
          <Text>{dt_begin ? dateTransform(dt_begin, "hh:mm") : null}</Text>
        </View>
        <View style={styles.flattableCell}>
          <Text>{dt_end ? dateTransform(dt_end, "hh:mm") : null}</Text>
        </View>
        <View style={styles.flattableCell}>
          <Text>{use_way}</Text>
        </View>
        <View style={styles.flattableCell}>
          <Text>{flow_grade}</Text>
        </View>
      </TouchableOpacity>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        {this._renderItem(this.props.navigation.state.params.pinfo)}
        <View style={{ width: screenWidth, height: 35, flexDirection: "row" }}>
          <View style={styles.tableCell}>
            <Text>开始时间</Text>
          </View>
          <View style={styles.tableCell}>
            <Text>结束时间</Text>
          </View>
          <View style={styles.tableCell}>
            <Text>吸氧方式</Text>
          </View>
          <View style={styles.tableCell}>
            <Text>吸氧量</Text>
          </View>
        </View>

        <FlatList
          style={{ flex: 1 }}
          ItemSeparatorComponent={this._separator}
          data={this.state.oxygenTaskList}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderFlatItem}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme_app.bg_color
  },
  lineStyle: {
    width: screenWidth - 120,
    height: 40,
    flexDirection: "row",
    alignItems: "center"
  },
  flattableCell: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "white",
    borderRightColor: "#efefef",
    borderRightWidth: 1
  },
  tableCell: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#bbb",
    borderRightColor: "#9b9b9b",
    borderRightWidth: 1
  }
});

function select(store) {
  return {};
}

export default connect(select)(OxygenDetail);
